﻿@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}

<link href="~/Content/js/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/js/slidebar/slidebar.css" rel="stylesheet" />
<link href="~/Content/js/workflow/flow.css" rel="stylesheet" />
<script src="~/Content/js/jquery-ui/jquery-ui.min.js"></script>
<script src="~/Content/js/jsplumb.min.js"></script>
<script src="~/Content/js/slidebar/slidebar.min.js"></script>
<script src="~/Content/js/workflow/flow.min.js"></script>
<script>
    var keyValue = $.request("keyValue");
    $(function () {
        initControl();
        if (!!keyValue) {
            $.ajax({
                url: "/WorkFlow/WFDef/GetFormJson",
                data: { keyValue: keyValue },
                dataType: "json",
                success: function (data) {
                    $('#id').val(data.id);
                    $('#version').val(data.version);
                    $('#stableVersion').val(data.stableVersion);
                    $('#name').val(data.name);
                    $('#remark').val(data.remark);
                    $('#cateId').val(data.cateId).trigger("change");
                    window.hxFlow.setFlow({
                        businessUrl: data.businessUrl,
                        modelKey: data.modelKey,
                        auditUrl: data.auditUrl,
                        before: data.before,
                        after: data.after,
                        skipEvent: data.skipEvent,
                        size:data.size,
                        nodes: data.nodes,
                        links: data.nodeLinks
                    });
                }
            });
        }
    });
    function initControl() {
        $("#cateId").renderSelect({
            url: "/WorkFlow/WFCategory/GetTreeSelectJson",
        });
        resize();
        $('#flow-left').slidebar({ side: "left", autoClose: false });
        $('#flow-right').slidebar({ side: "right", autoClose: false });
        window.hxFlow = new HxFlow();
    }

    function submitForm(index,op) {
        if (!$('#form1').formValid()) {
            return false;
        }

        var wf = {
            id: $("#id").val(),
            version: $("#version").val(),
            stableVersion: $("#stableVersion").val(),
            name: $("#name").val(),
            cateId: $("#cateId").val(),
            remark: $("#remark").val()
        };

        if (op == "update") {
            if (!wf.version) {
                $.modalAlert("更新操作版本号无效", "error");
                return;
            }

            wf.version = parseInt(wf.version) + 1;
        }

        try {
            var flow = window.hxFlow.getFlow();
            wf.businessUrl = flow.businessUrl;
            wf.modelKey = flow.modelKey;
            wf.auditUrl = flow.auditUrl;
            wf.before = flow.before;
            wf.after = flow.after;
            wf.skipEvent = flow.skipEvent;
            wf.size = flow.size;
            wf.nodes = flow.nodes;
            wf.nodeLinks = flow.links;
        }
        catch (err) {
            top.layer.alert(err.message, {
                    icon: "fa-times-circle",
                    title: "错误",
                    btn: ["确定"],
                    btnclass: ["btn btn-primary"]
            });
            return false;
        }

        $.submitForm({
            url: "/WorkFlow/WFDef/SubmitForm",
            extra: {
                headers: { "__RequestVerificationToken": $('[name=__RequestVerificationToken]').val() },
                contentType: "application/json"
            },
            param: JSON.stringify(wf),
            close: false,
            complete: null,
            success: function (rsp) {
                if (rsp.message) {
                    $.modalAlert(rsp.message, rsp.state);
                }

                if (rsp.state == "success") {
                    $.currentWindow().$("#gridList").trigger("reloadGrid");
                    top.layer.close(index);
                }
            }
        })
    }

    function resize() {
        $("#flow-container").height($(window).height() - $("table").height());
    }
</script>
<form id="form1">
    <table class="form">
        <tr>
            <th class="formTitle required">分类</th>
            <td class="formValue">
                <select id="cateId" name="cateId" class="form-control required">
                </select>
            </td>
            <th class="formTitle required">名称</th>
            <td class="formValue">
                <input id="id" name="id" type="hidden" />
                <input id="version" name="version" type="hidden" value="1" />
                <input id="stableVersion" name="stableVersion" type="hidden" value="0" />
                <input id="name" name="name" type="text" class="form-control required" placeholder="名称" />
            </td>
        </tr>
        <tr>
            <th class="formTitle" valign="top" style="padding-top: 5px;">
                备注
            </th>
            <td class="formValue" colspan="3">
                <textarea id="remark" name="remark" class="form-control" style="height: 60px;"></textarea>
            </td>
        </tr>
    </table>
    <div id="flow-container" class="flow-container">
        <div id="flow-panel" class="flow-panel">
            <div id="flow-left" class="flow-left">
                <div class="sidebar-menu">
                    <fieldset>
                        <legend>组件</legend>
                        <div class="flow-shape drag start" data-shape="start" data-type="start">
                            <label>开始</label>
                        </div>
                        <div class="flow-shape drag task" data-shape="task" data-type="task">
                            <label>过程</label>
                        </div>
                        <div class="flow-shape drag comment" data-shape="comment" data-type="comment">
                            <label>备注说明</label>
                        </div>
                        <div class="flow-shape drag end" data-shape="end" data-type="end">
                            <label>结束</label>
                        </div>
                    </fieldset>
                </div>
            </div>
            <div id="flow-center" class="flow-center" tabindex="0"></div>
            <div id="flow-right" class="flow-right">
                <div id="flow-props">

                </div>
            </div>
        </div>
    </div>
</form>
